<template>
  <div class="common-details">
    <customDetailsTopbar title="环境风险点" flag @back="back" />
    <div class="px-1 listInner d-scroll">
      <customSearch ref="customSearch" placeholder="请输入企业名称" title="环境风险点列表" :total="total" :is-super-search="true" @search="handleSearch" @superSearch="openSuperSearch" />
      <div v-if="tableList.length > 0" class="common_list">
        <div v-for="(item,index) in tableList" :key="index" class="list_item" @click="goDetail(item)">
          <div class="content_area">
            <div class="number_order">{{ index + 1 }}</div>
            <div class="right_content">
              <div class="content_title" style="max-width: 100%">
                {{ item.companyName }}
              </div>
              <ul class="des-list">
                <li v-for="(des,ind) in desList" :key="des.value" class="des">
                  <div style="display: flex">
                    <i :class="'iconfont c-text-color' + ((ind % 7) + 1)" v-html="des.icon" />
                    <div class="label">{{ des.label }}：</div>
                  </div>
                  <div class="value" style="line-height: 22px;margin-top: -4px">{{ item[des.value] }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <custom-loadmore ref="customLoadmore" :pages="pages" :page-num="form.pageNum" @load="handleLoadNext" />
    </div>
    <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%' }" lock-scroll close-on-popstate closeable class="custom-van-pop">
      <div class="pop-vertical-flex">
        <div class="pop-content">
          <div class="customPopCheckbox">
            <div class="checkbox-title">环境风险点名称</div>
            <el-input v-model="form.riskName" placeholder="请输入环境风险点名称" size="small" style="margin-bottom: 10px" />
          </div>
          <!--          <div class="checkbox-title">污染源名称：</div>-->
          <!--          <el-input v-model="form.riskName" class="mb-1" placeholder="请输入污染源名称：" size="small" clearable />-->
          <!--          <customPopCheckbox :list="gradeList" :check-value.sync="form.grade" title="污染源等级" />-->
          <customPopCheckbox :list="selectOptionAll['环保-风险源物质类型']" :check-value.sync="form.substanceType" title="风险物资类型" />
        </div>
        <div class="pop-bottom">
          <van-button type="default" @click="resetSuperSearch">清空</van-button>
          <van-button type="info" @click="handleSuperSearch">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import { HbGetCompanyRiskList } from '@/api/environment'
import CustomDetailsTopbar from '@/components/globals/custom-details-topbar.vue'

export default {
  components: { CustomDetailsTopbar },
  mixins: [commonList],
  data() {
    return {
      total: 0,
      form: {
        pageNum: 1,
        pageSize: 10,
        companyId: '-1',
        riskLevel: '',
        riskName: '',
        substanceType: '',
        companyName: ''
      },
      pages: 0,
      typeList: [
        { label: '水污染', value: '水污染' },
        { label: '大气污染', value: '大气污染' },
        { label: '土壤污染', value: '土壤污染' },
        { label: '噪声污染', value: '噪声污染' },
        { label: '辐射污染', value: '辐射污染' }
      ],
      desList: [
        { label: '风险点名称', value: 'riskName', icon: '&#xe790;' },
        // { label: '风险等级', value: 'riskLevel', icon: '&#xe61c;' },
        { label: '风险点位置', value: 'riskAddr', icon: '&#xe87e;' },
        { label: '风险物质', value: 'substance', icon: '&#xe69a;' },
        { label: '风险物质类型', value: 'substanceType', icon: '&#xe69a;' },
        { label: '风险物质存储量（吨）', value: 'storageValue', icon: '&#xe69a;' },
        // { label: '风险物质最大存储量（吨）', value: 'storageMaxValue', icon: '&#xe69a;' },
        // { label: '风险物质临界量（吨）', value: 'storageLimitValue', icon: '&#xe69a;' },
        { label: '责任人', value: 'headUser', icon: '&#xe69a;' },
        { label: '联系方式', value: 'phone', icon: '&#xe69a;' }
      ],
      tableList: []
    }
  },
  mounted() {
    const { current } = this.$route.query
    this.current = current || ''
    this.HbGetCompanyRiskList()
  },
  methods: {
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { current: this.current }
      })
    },
    async HbGetCompanyRiskList() {
      this.layout.showLoading()
      this.$refs.customLoadmore.loadStatus = true
      const { status, data } = await HbGetCompanyRiskList(this.form)
      if (status === 0 && data) {
        this.tableList = this.tableList.concat(data.list)
        this.total = data.total
        this.pages = data.pages
      }
      this.$refs.customLoadmore.loadStatus = false
      this.layout.hideLoading()
    },
    handleLoadNext(page) {
      this.form.pageNum = page
      this.HbGetCompanyRiskList()
    },
    goDetail(item) {
      this.$router.push({
        path: '/staging/pollutionSourcesDetail',
        query: { current: this.current, riskName: item.riskName, ...item }
      })
    },
    handleSearch(value) {
      this.form.companyName = value
      this.form.pageNum = 1
      this.tableList = []
      this.HbGetCompanyRiskList()
    },
    resetSuperSearch() {
      Object.keys(this.form).forEach(v => {
        v === 'companyId' ? this.form[v] = '-1' : this.form[v] = ''
      })
      this.$refs.customSearch.restore()
      this.form.pageNum = 1
      this.form.pageSize = 10
    },
    handleSuperSearch() {
      this.tableList = []
      this.superSearch = false
      this.HbGetCompanyRiskList()
    }
  }
}
</script>

<style lang="scss" scoped>
.checkbox-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}

.right_content{
  .des-list{
    display: flex;
    flex-wrap: wrap;
    .des{
      width: 100%;
    }
  }
}
</style>
